import React, { Component } from 'react'
import Title from "../../components/title/Title";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getInfo } from "../../store/modules/login";
import { getCartList, actions,getCheckedAll, getShowPrice} from "../../store/modules/shop";
import {filtersPrice} from "../../filters/index";
import "./shop.css"


class Shop extends Component {
    componentDidMount() {
        let {  shop: { reqCartList }, } = this.props;
        //进行请求
        reqCartList()
    }

    render() {
        let { cartList,checkedAll,showPrice, shop:{reqCartDel,reqCut,reqAdd,changeCheckedAll,changeCheckedOne} } = this.props;
        console.log(this.props);
        return (
            <div className="shop">
                <Title title="购物车"></Title>            
                {/* 购物车 */}
                <div className="S_iconmenu">
                    {
                        cartList.map((ele, index) => (
                            <ul key={ele.id}>
                                <li>
                                    <form>
                                        <label>
                                            <input type="checkbox" checked={ele.checked} onChange={()=>changeCheckedOne(ele.id)} />
                                        </label>
                                    </form>
                                    <img src={ele.img} alt="pic" />
                                    <div className="S_ximu">
                                        <h4>{ele.goodsname}</h4>
                                        <h3>{ele.goodsname}</h3>
                                        <Link to="#">粉色500ML<em className="iconfont">&#xe625;</em></Link>
                                        <p>必加入时降低&yen;100</p>
                                        <div className="S_ximu1">
                                            <div className="S_ximu11">
                                                <p>&yen;<span>{filtersPrice(ele.price * ele.num)}</span></p>
                                                <del>&yen;1099</del>
                                            </div>
                                            <form action="#">
                                                <span onClick={()=>reqCut(ele.id,ele.num)}>-</span>
                                                <input type="text" value={ele.num} disabled />
                                                <span onClick={()=>reqAdd(ele.id,ele.num)}>+</span>
                                            </form>
                                        </div>
                                    </div>
                                    <div className="del" onClick={()=>reqCartDel(ele.id)}>删除</div>
                                </li>
                            </ul>
                        ))
                    }
                </div>
                {/* 底部 */}
                <div className="S_foot1">
                    <div className="S_jiesuan">
                        <div className="S_quanxuan">
                            <form action="#">
                                <label ><input type="checkbox" checked={checkedAll} onChange={()=>changeCheckedAll(checkedAll)} />全选</label>
                            </form>
                        </div>
                        <div className="S_quanxuan1">
                            <div className="S_quanxuan11">
                                <h3>合计</h3>
                                <p>已免运费</p>
                            </div>
                            <div className="S_quanxuan12">
                                <h4>&yen;{filtersPrice(showPrice)}</h4>
                                <p>已优惠&yen;200元</p>
                            </div>
                        </div>
                        <Link to="/queren">结算</Link>
                    </div>
                </div>
            </div >
        )
    }
}
//状态
let mapStateToProps = (state) => ({
    info: getInfo(state),
    cartList: getCartList(state),
    checkedAll:getCheckedAll(state),
    showPrice:getShowPrice(state)
});
//方法
let mapDispatchToProps = (dispatch) => ({
    shop: bindActionCreators(actions, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(Shop)